<template>
	<cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh">
		<el-row style="height: 100%" type="flex">
			<cl-flex1 class="h-100" style="overflow: hidden;">
				<cl-pagefull @resize="onResize">
					<template #head>
						<el-row type="flex">
							<div>
								<cl-filter-group v-model="search" class="pr-1">
									<cl-filter label="所属事业部">
										<cl-select
											v-model="search.biz_id"
											placeholder="请选择"
											filterable
										>
											<el-option
												v-for="item in business"
												:key="item.biz_id"
												:label="item.biz_name"
												:value="item.biz_id"
											/>
										</cl-select>
									</cl-filter>
									<cl-filter label="品牌">
										<cl-select
											v-model="search.bra_id"
											placeholder="全部"
											clearable
											multiple
											collapse-tags
											filterable
										>
											<el-option
												v-for="item in bizRefData.brand"
												:key="item.bra_id"
												:label="item.bra_name"
												:value="item.bra_id"
											/>
										</cl-select>
									</cl-filter>
									<cl-filter label="部门">
										<cl-cascader
											clearable
											v-model="search.dept_ids"
											:options="deptList"
											collapse-tags
											style="min-width: 230px"
											:props="{
												multiple: true,
												value: 'dept_id',
												label: 'dept_name'
											}"
											filterable
											@change="changeDept"
										/>
									</cl-filter>
									<cl-filter label="组员">
										<cl-select
											v-model="search.user_id"
											placeholder="请选择"
											filterable
											clearable
										>
											<el-option label="全部" value="" />
											<el-option
												v-for="item in userList"
												:key="item.user_id"
												:label="item.user_name"
												:value="item.user_id"
											/>
										</cl-select>
									</cl-filter>
									<cl-filter label="广告账户">
										<el-input
											v-model="search.keyword"
											placeholder="请输入广告账户ID"
											clearable
											style="width: 170px"
										/>
									</cl-filter>
									<cl-filter label="时间">
										<el-date-picker
											v-model="search.date"
											type="date"
											style="width: 230px"
											:clearable="false"
										/>
									</cl-filter>
								</cl-filter-group>
							</div>
						</el-row>
					</template>
					<div style="height: 100%">
						<cl-table v-bind="table">
							<cl-empty slot="empty" />
							<template #column-advertiser_name="{ scope: { row } }">
								<div>{{ row.advertiser_name }}</div>
								<div>id:{{ row.advertiser_id }}</div>
							</template>
							<template #column-city="{ scope: { row } }">
								<el-button plain @click="getCityConsume(row)">城市消耗</el-button>
							</template>
						</cl-table>
					</div>
					<template #foot>
						<el-row type="flex">
							<cl-flex1 />
							<zm-pagination />
						</el-row>
					</template>
				</cl-pagefull>
			</cl-flex1>
		</el-row>
		<!-- 城市消耗的抽屉 -->
		<city-consume ref="cityConsumeRef" :cityConsumeList="cityConsumeList" />
	</cl-crud>
</template>

<script>
import { mapGetters } from "vuex";
import { delEmptyChildren } from "@/utils";
import CityConsume from "./components/city-consume";
export default {
	name: "RealTimeConsumption",
	components: { CityConsume },
	data() {
		return {
			search: {
				biz_id: "",
				company_id: "",
				bra_id: [],
				dept_ids: [],
				user_id: "",
				date: new Date()
			},
			biz_name: "",
			table: {
				"context-menu": ["refresh"],
				columns: [
					{
						label: "#",
						type: "index",
						width: 50,
						disable: true,
						fixed: "left"
					},
					{
						label: "品牌",
						prop: "biz_name",
						minWidth: 100,
						showOverflowTooltip: true,
						fixed: "left"
					},
					{
						label: "媒体平台",
						prop: "bra_name",
						minWidth: 100,
						showOverflowTooltip: true,
						fixed: "left"
					},
					{
						label: "部门",
						prop: "dept_name",
						width: 200,
						showOverflowTooltip: true,
						fixed: "left"
					},
					{
						label: "组员",
						prop: "user_name",
						minWidth: 80,
						showOverflowTooltip: true,
						fixed: "left"
					},
					{
						label: "广告账户账号",
						prop: "supplie_name",
						width: 200,
						showOverflowTooltip: true,
						fixed: "left"
					},
					{
						label: "媒体账号",
						prop: "advertiser_name",
						align: "left",
						width: 150,
						fixed: "left"
					},
					{ label: "城市消耗", prop: "city", width: 120, fixed: "left" },
					{ label: "消耗", prop: "cost", width: 150 },
					{ label: "展现数", prop: "shows", width: 150 },
					{ label: "千展费用", prop: "avg_show_cost", width: 150 },
					{ label: "点击数", prop: "click", width: 150 },
					{ label: "平均点击单价", prop: "avg_click_cost", width: 150 },
					{ label: "点击率", prop: "ctr", width: 150 },
					{ label: "转化数", prop: "converts", width: 150 },
					{ label: "转化成本", prop: "convert_cost", width: 150 },
					{ label: "转化率", prop: "convert_rate", width: 150 },
					{ label: "深转度", prop: "deep_convert", width: 150 },
					{ label: "深转成本", prop: "deep_convert_cost", width: 150 },
					{ label: "深转率", prop: "deep_convert_rate", width: 150 },
					{ label: "加微数", prop: "wechat_num", width: 150 },
					{ label: "加微成本", prop: "wechat_rate", width: 150 },
					{ label: "定金数", prop: "deposit_num", width: 150 },
					{ label: "定金成本", prop: "convert_rate", width: 150 }
				],
				props: {
					maxHeight: 500
				}
			},
			load: false,
			deptList: [], //部门
			userList: [], //组员
			cityConsumeList: []
		};
	},
	computed: {
		bizRefData() {
			const { biz_id } = this.search;
			return this.getBizRefData(biz_id);
		},
		...mapGetters(["browser"])
	},
	created() {
		this.search.biz_id = this.getCurrBiz();
		this.init();
	},
	methods: {
		async init(type = 0) {
			const { biz_id } = this.search;
			this.getBizRefBrand(biz_id);
			this.getBizRefCompany(biz_id);
			this.initData(type);
		},
		async initData(type = 0) {
			const { biz_id } = this.search;

			this.deptList = delEmptyChildren(
				(await this.$store.dispatch("common/getDept", {
					biz_id,
					post: 2,
					needAll: false,
					needCascader: true
				})) || []
			);
			this.changeDept(type);
		},
		onLoad({ ctx, app }) {
			ctx.service(this.$service.config)
				.set("dict", {
					api: {
						page: "realTimeConsumptionList"
					}
				})
				.done();
			if (!this.load) return;
			app.refresh();
		},
		//切换事业部
		changeBiz() {
			this.search.company_id = "";
			this.search.bra_id = [];
			// this.search.dept_id = "";
			this.search.dept_ids = [];
			this.init(1);
		},
		//切换部门
		changeDept(type) {
			this.getManageDeptUser();
			if (type) {
				this.refresh();
			}
		},
		async onRefresh(params, { next, done, render }) {
			const { biz_id } = this.search;
			console.log(biz_id);
			let data = await next({
				...params,
				biz_id
			});
			this.cityConsumeList = data;
			render(data);
		},
		getCityConsume(row) {
			this.$refs.cityConsumeRef.open(row);
		},
		// 获取组员
		async getManageDeptUser() {
			let { biz_id } = this.search;
			let dept_id = this.search.dept_ids.join();
			this.userList = [];
			const data = await this.$service.user.deptuserlists({
				biz_id,
				dept_id,
				post: 2,
				manage_user: 1
			});
			this.userList = data;
		},
		// crud刷新
		refresh(biz_id, reset = true) {
			let params = { ...this.search, biz_id };
			if (reset) {
				params.page = 1;
			}
			this.$refs.crud.refresh(params);
			this.load = true;
		},
		// crud刷新
		// refresh() {
		//     this.$refs.crud.refresh({ page: 1, ...this.search });
		//     this.$nextTick(() => {
		//         this.$refs.table?.calcMaxHeight?.();
		//     });
		// },
		onResize(h) {
			this.table.props.maxHeight = h;
		}
	}
};
</script>

<style lang="scss" scoped>
.title {
	font-size: 18px;
}
.topBox {
	margin-left: -20px;
}
</style>
